import React from 'react'
import {SearchBar, Toast, Tabs} from "antd-mobile";
import CarouselImage from "../../components/carousel";
import {withRouter, RouteComponentProps} from 'react-router-dom';
// import food1 from '../../assets/products/foot1.jpg'
import request from "../../utils/request";
import styles from './index.module.css'


interface Product {
    id: number,
    name: string,
    image: string,
    price: number,
    sales: number,
}

const ChunkProduct: React.FC<{ item: Product, history: any }> = ({item, history}) => {
    return (

        <div className={styles.box}>
            <img src={item.image} alt={"product1"} style={{width: '100%', borderRadius: '8px 8px 0 0'}}
                 onClick={() => {
                     history.push(`/product/${item.id}`)
                 }}/>
            <div style={{padding: '0 5px 5px 5px'}}>
                <div style={{fontSize: '18px', fontWeight: 800, margin: '10px 0'}}>{item.name}</div>
                <div style={{fontSize: '16px', fontWeight: 800, margin: '5px 0'}}>¥{item.price}</div>
                <div>已售 {item.sales} <i className={"iconfont icon-shopping-fill"}/></div>
            </div>
        </div>
    );
};


const tabs = [
    {
        inx: 0,
        title: <div>热销<i className={"iconfont icon-fire"}/></div>
    },
    {
        inx: 1,
        title: <div>秒杀<i className={"iconfont icon-thunderbolt"}/></div>
    },
];

interface State {
    hotProductList: Product[],
    secondKillProductList: any[]
}

interface Props extends RouteComponentProps {
    history: any
}

class Index extends React.Component<Props> {

    state: State = {
        hotProductList: [],
        secondKillProductList: []
    };


    componentDidMount() {
        request('/product/list').then((result) => {
            const {data: {productList}} = result;
            this.setState({
                hotProductList: productList,
                secondKillProductList: []
            });
        }).catch((err) => {
            console.log(err);
            Toast.fail('请求失败', 2)
        });
    }

    render() {
        const {history} = this.props;
        return (
            <div style={{backgroundColor: 'white', height: '100%', textAlign: 'center', padding: '0 10px'}}>
                <div><SearchBar placeholder="Search" maxLength={8}/></div>
                <CarouselImage/>
                <div>
                    <Tabs tabs={tabs}
                          initialPage={0}
                          prerenderingSiblingsNumber={0}
                    >
                        <div className={styles.productContent}>
                            {
                                this.state.hotProductList.map((item, inx) => {
                                    return <ChunkProduct item={item} key={inx} history={history}/>
                                })
                            }
                        </div>
                        <div className={styles.productContent}>
                            {
                                this.state.secondKillProductList.map((item, inx) => {
                                    return <ChunkProduct item={item} key={inx} history={history}/>
                                })
                            }
                        </div>
                    </Tabs>
                </div>

            </div>
        );
    }
}

export default withRouter(Index)

